<template>
  <div class="home">
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
// import axios from "axios";
import { reactive, toRefs } from "vue";
// import http from "../utils/request";

import { getList } from "../utils/home";
//引入的时候加大括号是因为 我们导出的时候也加了大括号
export default {
  setup(props) {
    const data = reactive({
      list: [],
    });
    // axios.get("https://api.it120.cc/small4/shop/goods/list").then((res) => {
    //   console.log(res);
    //   data.list = res.data.data;
    // });
    // http.get("https://api.it120.cc/small4/shop/goods/list").then((res) => {
    //   console.log(res);
    // });

    getList()
      .then((res) => {
        console.log(res);
        data.list = res.data.data;
      })
      .catch((err) => {
        console.log(err);
      });
    //调用封装好饿的axios方法 请求列表数据

    return { ...toRefs(data) };
  },
};
</script>
